<div el-container>
  <div el-main>
    <el-form label-width="150px" size="small" label-position="left">
      <el-form-item [label]="'SETTING.UTIL.VER' | translate">
        <div class="checkbox">
          <el-button type="info" [elDisabled]="!updateReady" (click)="updateAP()"
            >{{ appVersion }}
            <div [hidden]="!updateReady" style="float:right"><i class="el-icon-arrow-up"></i></div
          ></el-button>
        </div>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.MUTE' | translate">
        <div class="checkbox">
          <el-switch [model]="Mute" (modelChange)="selectSwitch('Mute')"></el-switch>
        </div>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.LOCK' | translate">
        <div class="checkbox">
          <el-switch [model]="Lock" (modelChange)="selectSwitch('Lock')"></el-switch>
        </div>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.ZOOM' | translate">
        <el-slider [min]="80" [max]="200" [model]="Zoom" (modelChange)="zoom$.next($event)"></el-slider>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.OPACITY' | translate">
        <el-slider [min]="50" [max]="100" [model]="Opacity" (modelChange)="changeSlider('Opacity', $event)"></el-slider>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.CACHE' | translate">
        <div class="checkbox">
          <el-button type="danger" (click)="clearCache()">{{ 'UTIL.CLEAR' | translate }}</el-button>
        </div>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.OPEN-SCREENSHOT-DIR' | translate">
        <div class="checkbox">
          <el-button type="primary" (click)="openScreenShotDir()">{{ 'UTIL.OPEN' | translate }}</el-button>
        </div>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.LANGUAGE' | translate">
        <div class="checkbox">
          <el-select
            [model]="translateService.currentLang"
            [placeholder]="'UTIL.PLEASESELECT' | translate"
            (modelChange)="changeLanguage($event)"
          >
            <el-option
              *ngFor="let lang of translateService.getLangs()"
              [label]="languageList[lang]"
              [value]="lang"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.DEFAULTGAME' | translate">
        <div class="checkbox">
          <el-select
            [model]="DefaultGame"
            [placeholder]="'UTIL.PLEASESELECT' | translate"
            (modelChange)="changeDefaultGame($event)"
          >
            <el-option *ngFor="let game of gameService.GameInfo" [label]="game.Name" [value]="game"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.DATACOLLECT' | translate">
        <div class="checkbox">
          <el-switch [model]="DataCollectPermit" (modelChange)="switchPermit($event)"></el-switch>
        </div>
      </el-form-item>
      <el-form-item [label]="'SETTING.UTIL.ACCELERATION' | translate">
        <div class="checkbox">
          <el-switch
            [model]="disableHardwareAcceleration"
            (modelChange)="switchDisableHardwareAcceleration($event)"
          ></el-switch>
        </div>
      </el-form-item>
    </el-form>
  </div>
</div>
